/**
* 左边菜单
*/ 
<template>
<!-- eslint-disable -->
    <el-menu
      :collapse="collapsed"
      collapse-transition
      router
      unique-opened
      class="el-menu-vertical-demo"
      background-color="#28729D"
      text-color="#fff"
      active-text-color="#88e9ff"
      :default-active="$route.path">
      <el-menu-item
        :index="'/home'">
        <i class="iconfont mr8 icon-shouye" ></i>
        <span class="f-16">首页</span>
      </el-menu-item>
      <el-submenu
        v-for="menu in allmenu"
        :key="menu.id"
        :index="menu.title">
        <template slot="title">
          <i class="iconfont mr8" :class="menu.icon"></i>
          <span class="f-16">{{ menu.title }}</span>
        </template>
        <el-menu-item-group>
          <el-menu-item
            v-for="chmenu in menu.sub_menus"
            :index="'/' + chmenu.route"
            :key="chmenu.id">
            <i class="iconfont mr8" :class="chmenu.icon"></i>
            <span class="f-16">{{ chmenu.title }}</span>
          </el-menu-item>
        </el-menu-item-group>
      </el-submenu>
    </el-menu>
</template>
<script>
import {mapState} from 'vuex'
import {adminShow} from "@/utils/index";
export default {
  name: "leftnav",
  data() {
    return {
      allmenu: [],
      adminShow:adminShow()
    };
  },
  computed:{
    ...mapState(['collapsed','rightList']),
    // pathMethods(){
    //   const route = this.$route
    //   let { meta, path } = route
    //   if(/_/g.test(path)){
    //     path = path.split('_')[0]
    //   }
    //   return path
    // }
  },
  // 创建完毕状态(里面是操作)
  created() {
    let newArr = []
    this.rightList.forEach(ele => {
      if(!this.adminShow){
        if(ele.title === '科研队伍') ele.title = '科研人员'
      }
      if(ele.sub_menus && ele.sub_menus.length > 0){
          let obj = {...ele,sub_menus:[]}
          ele.sub_menus.forEach(item => {
              if(item.navigation === 1){
                obj.sub_menus.push(item)
              }
          })
          newArr.push(obj)
      }else{
          newArr.push(ele)
      }
    });
    if(process.env.NODE_ENV === 'development'){
      const arr = [{
        id: 200,
        title: '权限',
        route: 'r/permission'
      },{
        id: 201,
        title: '菜单',
        route: 'r/menus'
      },{
        id: 202,
        title: '角色',
        route: 'r/roles'
      }]
      newArr[newArr.length-1].sub_menus.push(...arr)
    }
    this.allmenu = newArr
  },
};
</script>
<style>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 240px;
  min-height: 400px;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  border: none;
  text-align: left;
}
.el-menu-item-group__title {
  padding: 0px;
}
.el-menu-bg {
  background-color: #1f2d3d !important;
}
.el-menu {
  border: none;
  flex:1;
}
.el-menu--popup-right-start{
  max-height: 100vh;
  overflow-y:auto ;
}
</style>